<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="telephone=no" name="format-detection">
    <title>黎世阁-账户信息</title>
    <link rel="stylesheet" href="../css/public.css"/>
    <link rel="stylesheet" href="../personal.css/area.css"/>
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript">
    (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;

                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
            recalc();
        })(document, window);

    </script>
</head>
<body>
	<!--头部开始-->
	<header>
		<i class="iconfont left_jt">&#xe65b;</i>
		 <div class="title">添加地址</div>
	</header>
	<!--头部结束-->
	<section class="areaList">
		<ul class="area_list">
			<li class="area_item">
				<span class="area_name">北京</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<ul class="proList">
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
			</ul>
		    <li class="area_item">
				
				<span class="area_name">北京</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<ul class="proList">
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
			</ul>
		    <li class="area_item">
				
				<span class="area_name">北京</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<ul class="proList">
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
			</ul>
		    <li class="area_item">
				
				<span class="area_name">北京</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<ul class="proList">
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
				<li class="proList_item">
					<i class="iconfont dian">&#xe625;</i>
					<span class="pro_name">大同</span>
				</li>
			</ul>
		</ul>
	</section>
</body>
<script>
	$(".area_item").click(function(){
		if($(this).find('i').hasClass("right_jt")){
			$(this).find('i').removeClass("right_jt");
			$(".proList").hide();
		}else{
			$(this).find('i').removeClass("right_jt");
			$(this).find('i').addClass("right_jt");
			var index=$(this).index(".area_item");
			$(".proList").hide();
			$(".proList").eq(index).show();
		}
		
	})
	
	$(".proList_item").click(function(){
//		    $(this).removeClass('color_hui');
			$(this).addClass('color_hui');
			var index=$(this).index('.proList_item');
			setTimeout('$(".proList").hide()',100)
			setTimeout("$('.proList_item').removeClass('color_hui')",100)
			$(".area_item").find('i').removeClass("right_jt");
		})
</script>
</html>
